<template>
  <view>
    <view class="hpv-choose">
      <view>
        <view class="hpv-type">{{ info.name }}</view>
        <view class="hpv-age">
          <text v-for="(item,index) in info.describe" :key="index">{{ item }}</text>
        </view>
      </view>
      <view class="hpv-price">¥{{ info.price[0] }}-¥{{ info.price[1] }}</view>
    </view>
    <!-- 表单填写 -->
    <view class="xinguan-view">
      <view class="xinguan-flex">
        <text>真实姓名</text>
        <input placeholder="请输入真实姓名" v-model="obj.name" placeholder-class="input-style"/>
      </view>
      <view class="xinguan-flex">
        <text>身份证</text>
        <input placeholder="请输入身份证" v-model="obj.id_card" placeholder-class="input-style"/>
      </view>
      <view class="xinguan-flex">
        <text>性别</text>
        <picker mode="selector" class="flex-left" :range="['男','女']" @change="change">
          <view>
            <text>{{ obj.gender || '选择' }}</text>
            <image src="/static/other/gengduo.svg"></image>
          </view>
        </picker>
      </view>
      <view class="xinguan-flex">
        <text>出生日期</text>
        <picker mode="date" class="flex-left" @change="changeDate">
          <view>
            <text>{{ obj.born_date || '选择' }}</text>
            <image src="/static/other/gengduo.svg"></image>
          </view>
        </picker>
      </view>
      <view class="xinguan-flex">
        <text>手机号</text>
        <input placeholder="请输入手机号" type="number" v-model="obj.phone" placeholder-class="input-style"/>
      </view>
    </view>
    <!-- 选择套餐 -->
    <view class="combo-view">
      <block>
        <text class="combo-title">{{ list1.title }}</text>
        <view class="combo-list">
          <!--           @click="go1(index)" :class="index===k1?'checkstyle':''-->
          <text v-for="(item,index) in list1.name" :key="index" @click="go1(index)" :class="index===k1?'checkstyle':''">
            {{
              item.combo
            }}
          </text>
        </view>
      </block>
      <!-- 接种时间 -->
      <block>
        <text class="combo-title">{{ list2.title }}</text>
        <view class="combo-list">
          <text v-for="(item,index) in list2.name" @click="go2(index)" :key="index" :class="index===k2?'checkstyle':''">
            {{
              item.time
            }}
          </text>
        </view>
      </block>
    </view>
    <!-- 提交 -->
    <view style="height:300rpx"></view>
    <view class="Total-view">
      <text>合计：¥{{ obj.price }}</text>
      <text @click="submit">提交</text>
    </view>
  </view>
</template>
<script>
import {hpvpack, hpvprice, reshpv} from "../../utils/API/vaccineorder";

export default {
  data() {
    return {
      info: {},
      //套餐
      list1: [],
      //时间
      list2: [],
      //套餐下标
      k1: -1,
      //时间下标
      k2: -1,
      //  表单
      obj: {
        name: '',
        id_card: '',
        gender: '',
        born_date: '',
        phone: "",
        combo: '',
        ino_time: "",
        price: 0,
        hpv_name: ""
      }
    }
  },
  methods: {
    go1(k) {
      this.k1 = k
      this.obj.combo = this.list1.name[k].combo
    },
    go2(k) {
      this.k2 = k
      console.log(this.list2.name[k])
      this.obj.ino_time = this.list2.name[k].time
    },
    async xuan() {
      wx.showLoading({  // 显示加载中loading效果
        title: "加载中",
        mask: true  //开启蒙版遮罩
      });
      var obj = {
        hpv_id: this.info._id,
        combo_id: this.list1.name[this.k1].combo_id,
        time_id: this.list2.name[this.k2].time_id,
      }
      let {data} = await hpvprice(obj)
      this.obj.price = data[0].price
      wx.hideLoading();
    },
    change(e) {
      if (e.detail.value === '0') {
        this.obj.gender = "男"
      } else {
        this.obj.gender = "女"
      }
    },
    changeDate(e) {
      this.obj.born_date = e.detail.value;
    },
    async submit() {
      let data = await reshpv(this.obj)
      console.log(data)
      if (data.msg === "提交成功") {
        wx.showToast({
          title: data.msg,
          icon: 'success',
          duration: 2000
        })
        wx.navigateTo(({
          url:'/pages/hpvorder/hpvorder'
        }))
      } else {
        wx.showToast({
          title: data.msg,
          icon: 'error',
          duration: 2000
        })
      }
    }
  },
  async onLoad(o) {
    this.info = JSON.parse(o.item)
    this.obj.hpv_name = this.info.name
    let {data} = await hpvpack()
    this.list1 = data[0];
    this.list2 = data[1];
  },

  computed: {
    sun() {
      return {time: this.k1, combo: this.k2}
    }
  },
  watch: {
    sun(val) {
      if (val.time !== -1 && val.combo !== -1) {
        this.xuan()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 表单提交 */
@import "../../static/common-style/form.css";

page {
  background-color: #fafafa;
}

.hpv-choose {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.hpv-type {
  font-size: 35rpx;
}

.hpv-age {
  display: flex;
  align-items: center;
}

.hpv-age text {
  background-color: #f4f6fa;
  padding: 7rpx;
  font-size: 25rpx;
  margin: 10rpx 10rpx 10rpx 0;
}

.hpv-price {
  font-weight: bold;
  color: #ff5f2c;
}

/* 套餐 */
.combo-view {
  background-color: #ffffff;
  padding: 20rpx;
  margin: 20rpx 0;
}

.combo-title {
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.combo-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.combo-list text {
  padding: 20rpx 40rpx;
  background-color: #f5f5f5;
  margin: 0 20rpx 20rpx 0;
  border-radius: 10rpx;
  display: block;
}

/* 选中加上样式 */
.checkstyle {
  background-color: #2c76ef !important;
  color: #ffffff !important;
}
</style>
